<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<body>
<div id="app" class="ok-body" v-cloak>
    <!--模糊搜索区域-->
    <template>
        <div style="margin-bottom: 8px;margin-top: 8px;">
            <i-select placeholder="请选择停车场" v-model="entity.parkId" style="width:200px">
                <i-option   v-for="item in parkList" :value="item.parkId" :key="item.parkId">{{ item.name }}</i-option>
            </i-select>
            <i-input placeholder="输入区域名称"  v-model="entity.description"  style="width: 300px"></i-input>
            <i-button type="primary"  icon="ios-search" @click="load()">搜索</i-button>
            <i-button type="primary"  icon="ios-redo" @click="reload()" >重置</i-button>
            <i-button type="primary" style="float:right;" icon="md-add" @click="add()">新增</i-button>
        </div>
    </template>
    <template>
        <i-table size="small" :columns="tableTitle"  :data="tableData">
            <template slot-scope="tableScope" slot="action">
                <i-button type="primary" size="small" icon="md-create" ghost class="table-btn" @click="edit(tableScope.row)">修改</i-button>
                <i-button type="primary" size="small" icon="md-trash" ghost class="table-btn" @click="remove(tableScope.row)">删除</i-button>
                <!--                <i-button type="primary" size="small" icon="md-card" ghost class="table-btn" @click="payConfig(tableScope.row)">支付配置</i-button>-->
            </template>
        </i-table>
        <br>
        <Page  style="float: right;" :current="entity.pageNo" :total="tableSize" :page-size="entity.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
    layui.use(["okUtils", "okLayer"], function () {
        var okUtils = layui.okUtils;
        var okLayer = layui.okLayer;
        var vm = new Vue({
            el: '#app',
            data: function(){
                var that = this;
                return {
                    tableTitle : [{
                        title: '序号',
                        minWidth : 80,
                        render: function(h, params) {
                            return h('span', params.index + (that.entity.pageNo- 1) * that.entity.pageSize + 1);
                        }
                    },{
                    //     key : "name",
                    //     title : "停车场名称",
                    //     minWidth:150
                    // },{
                        key : "area",
                        title : "区域",
                        minWidth:120
                    },{
                        key : "place",
                        title : "区域位数",
                        minWidth:120
                    },{
                        key : "rowNum",
                        title : "区域行数",
                        minWidth:120
                    },{
                        key : "columnNum",
                        title : "区域列数",
                        minWidth:120
                    },{
                        key : "rowSpace",
                        title : "行间距(米)",
                        minWidth:120
                    },{
                        key : "columnSpace",
                        title : "列间距(米)",
                        minWidth:120
                    }, {
                        key: "spaceNearEntrance",
                        title: "靠入口位点",
                        minWidth: 120
                    }, {
                        key: "spaceFarEntrance",
                        title: "靠入口距离(米)",
                        minWidth: 120
                    }, {
                        title : '操作',
                        key : 'action',
                        minWidth : 280,
                        fixed : 'right',
                        align : 'center',
                        slot:'action'
                    } ],
                    tableData : [],
                    entity : {
                        pageSize : 10,
                        pageNo : 1,
                        description:''
                    },
                    parkList:[],
                    tableSize : 50
                }
            },
            methods: {
                load : function() {
                    var that = this;
                    okUtils.ajaxCloud({
                        url:"/app/parkArea/list",
                        param : that.entity,
                        success : function(result) {
                            that.tableData = result.msg.records;
                            that.tableSize = result.msg.totalCount;
                        }
                    });
                },
                reload : function(){
                    vm.entity.pageSize = 10;
                    vm.entity.pageNo = 1;
                    vm.entity.description = '';
                    vm.entity.parkId=null;
                    this.load();
                },
                changePage : function(pageNo) {
                    vm.entity.pageNo = pageNo;
                    vm.load();
                },
                changePageSize : function(pageSize) {
                    vm.entity.pageSize = pageSize;
                    vm.load();
                },
                edit : function(entity) {
                    okUtils.dialogOpen({
                        title: '修改',
                        url: "app/parkArea/form.html",
                        scroll : true,
                        width: '40%',
                        height: '90%',
                        success : function(dialog) {
                            dialog.vm.entity.id = entity.id;
                            dialog.vm.load();
                        },
                        yes : function(dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                add:function(){
                    okUtils.dialogOpen({
                        title: '新增',
                        url: "app/parkArea/form.html",
                        scroll : true,
                        width: '40%',
                        height: '90%',
                        success : function(dialog) {
                            dialog.vm.load();
                        },
                        yes : function(dialog) {
                            dialog.vm.acceptClick(vm);
                        }
                    });
                },
                remove:function(entity) {
                    okLayer.confirm("确定要删除吗？", function () {
                        okUtils.ajaxCloud({
                            url:"/app/parkArea/delete",
                            param : {id: entity.id,parkId: entity.parkId},
                            success : function(result) {
                                okLayer.msg.greenTick(result.msg);
                                vm.load();
                            }
                        });
                    })
                },
                listParkManage : function() {
                    var that = this;
                    okUtils.ajaxCloud({
                        url:"/app/park/selectByUser",
                        // param : {'orgId':vm.entity.orgId},
                        success : function(result) {
                            that.parkList = result.msg;
                        }
                    });
                }
            },
            created: function() {
                this.listParkManage();
                this.load();
            }
        })
    });
</script>
</body>
</html>
